<!DOCTYPE html>
<html onselectstart="return false">
<head>
    <meta charset="UTF-8"/>
    <meta name="Keywords" content="3D,相册展示,鼠标拖动相册展示,js,jquery"/>
    <meta name="Description" content=""/>
    <title> 3D相册跟随鼠标滚动 </title>
    <link rel="shortcut icon" href="/static/img/Head.png" type="image/x-icon"/>
    <link href="css/index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1 id="headline" class="demo-text">
    我<br/>的<br/>相<br/>册<br/>
    <p id="bor">
    <p/>
    <span>---</span>
</h1>
<div id="bg_wall">
    <img src="http://demo.zhangbin.xin/sbtdxczs/image/bgs.jpg" height="2000"/>
</div>
<div id="pho">
    <div id="photo_wall">
        <img src="http://demo.zhangbin.xin/sbtdxczs/image/1.jpg"/>
        <img src="http://demo.zhangbin.xin/sbtdxczs/image/2.jpg"/>
        <img src="http://demo.zhangbin.xin/sbtdxczs/image/13.jpg"/>
        <img src="http://demo.zhangbin.xin/sbtdxczs/image/4.jpg"/>
        <img src="http://demo.zhangbin.xin/sbtdxczs/image/5.jpg"/>
        <img src="http://demo.zhangbin.xin/sbtdxczs/image/6.jpg"/>
        <img src="http://demo.zhangbin.xin/sbtdxczs/image/7.jpg"/>
        <img src="http://demo.zhangbin.xin/sbtdxczs/image/8.jpg"/>
        <img src="http://demo.zhangbin.xin/sbtdxczs/image/3.jpg"/>
        <img src="http://demo.zhangbin.xin/sbtdxczs/image/10.jpg"/>
        <img src="http://demo.zhangbin.xin/sbtdxczs/image/11.jpg"/>
    </div>
</div>
<script type="text/javascript" src="/static/plugins/jQuery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        photo_wall();
    });

    function photo_wall() {
        var roX = -10;
        var roY = 0;
        var lens = $("#photo_wall").find("img").length;
        var deg = 360 / lens;
        $("#photo_wall").find("img").each(function (i) {
            $(this).css({
                "transition": "1s " + (lens - i) * 0.15 + "s",
                "transform": "rotateY(" + deg * i + "deg) translateZ(400px)"
            }).attr("ondragstart", "return false");//不能拖动图片
        });
        $("#bg_wall").attr("ondragstart", "return false");
        $(document).mousedown(function (ev) {
            var x_ = ev.clientX;
            var y_ = ev.clientY;

            $(this).bind("mousemove", (function (ev) {//鼠标移动事件
                var x = ev.clientX;
                var y = ev.clientY;
                var xN = x - x_;
                var yN = y - y_;
                roX -= yN * 0.08;
                roY += xN * 0.08;
                $("#photo_wall").css({
                    "transform": "perspective(1500px) rotateX(" + roX + "deg) rotateY(" + roY + "deg)"
                });
                x_ = ev.clientX;
                y_ = ev.clientY;
            }));
        }).mouseup(function () {
            $(this).unbind("mousemove");//移出绑定的事件
        });
    }
</script>
</body>
</html>